<div id="header">
    #@header()
    <!--        <a class="meiye-btn meiye-tuijian-btn primary" style="font-size: 13px;-->
    <!--            color: #FFFFFF;-->
    <!--            letter-spacing: 0;">我要推荐</a>-->
    <div class=" btn-group float-right">
        <a href="/admin/rec" type="button" class="btn btn-link  ">上传图片</a>
        <a href="/admin/classes" type="button" class="btn btn-link  ">分类管理</a>
        <a href="/admin/images" type="button" class="btn btn-link  ">图片管理</a>
    </div>
</div>

<div class="go-top-container">
    <a class="go-top">
        <img class="gotop-icon" src="/assets/public/images/canvas/go-top.png"/>
    </a>
</div>

<script src="/assets/public/js/common/header.js"></script>


<div id="sidebar">
    #@sidebar()
</div>
<script src="/assets/public/js/common/sidebar.js?1001"></script>


<div id="body-container" class="sidebar-body">
    #@imageList()
    <div class="loading-more">
        <canvas class="loading-more-canvas" width="600" height="600" style="width: 40px; height: 40px;"></canvas>
        <span>没有更多内容了~</span>
    </div>
</div>


<script src="/assets/public/js/masonry.pkgd.min.js"></script>
<script src="/assets/public/js/lazyload.js"></script>
<script src="/assets/public/js/scroll.js"></script>
<script src="/assets/public/js/canvas.js"></script>
<script>
    $(function () {
        var Home = {
            getQuery: function (variable) {
                var query = window.location.search.substring(1);
                var vars = query.split("&");
                for (var i = 0; i < vars.length; i++) {
                    var pair = vars[i].split("=");
                    if (pair[0] == variable) {
                        return pair[1];
                    }
                }
                return (false);
            },
            init: function () {
                this.initMasonry();
                setTimeout(function () {
                    Home.initMasonry();
                }, 600);
                this.initLazyLoad();
                this.masonryWidth();
                this.initEvent();
                // if (location.pathname == '/') {
                //     this.initLoadingMore();
                // } else {
                this.initLoadingMoreCanvas();
                // }
            },
            initMasonry: function () {
                $('#image-list').masonry({
                    itemSelector: '.box',
                    gutter: 26,
                    isAnimated: true,
                    percentPosition: true
                });
            },
            initLazyLoad: function () {
                $("img.lazyload").lazyload({
                    effect: "show",
                    load: Home.initMasonry,
                    threshold: 200,
                    effect_params: 'fast'
                });
            },
            masonryWidth: function () {
                var $browser = document.body.clientWidth - 190;
                var $boxWidth = 246;         // 盒子宽度
                var $boxSpacing = 26;      //盒子与盒子之间的间距
                if ($browser <= 472) {
                    $("#image-list").css('width', 246);
                    $(".loading-more").css('width', 246);
                } else {
                    $num = ($browser - $boxWidth) / ($boxWidth + $boxSpacing);
                    $n = parseInt($num);
                    $masonryWidth = $n * ($boxWidth + $boxSpacing) + $boxWidth;
                    $("#image-list").css('width', $masonryWidth);
                    $(".loading-more").css('width', $masonryWidth);
                }
            },
            initEvent: function () {
                // 浏览器窗口变动
                window.onresize = Home.masonryWidth;
            },
            initLoadingMore: function () {
                var loading = false;
                $(window).scroll(function () {
                    var scrollTop = $(window).scrollTop();
                    var height = $('#image-list').height();
                    var windowHeight = $(window).height();
                    if (scrollTop >= height - windowHeight + 100) {
                        if (!loading) {
                            loading = true;
                            $('.loading-more').css('opacity', 1);
                            $.ajax({
                                type: "GET",
                                url: "/",
                                dataType: 'json',
                                success: function (result) {
                                    var list = result.data;
                                    nunjucks.configure('/assets/public/view', {autoescape: true});
                                    var str = nunjucks.render('list.html', {list: list});
                                    //let ad = '<div class="box" style="width:246px;height:400px;"><ins class="adsbygoogle" style="display:inline-block;width:246px;height:400px" data-ad-client="ca-pub-9196458143056886" data-ad-slot="9247751478"></ins></div>'
                                    //str = ad + str;
                                    str = $(str);
                                    $('#image-list').append(str);
                                    $('#image-list').masonry('appended', str, true);
                                    Home.initLazyLoad();
                                    loading = false;
                                },
                                error: function (e) {
                                    console.log(e.status);
                                    console.log(e.responseText);
                                }
                            });
                        }
                    }
                });
            },
            initLoadingMoreCanvas: function () {
                var loading = false;
                var self = this;
                var pn = window.location.hash.substring(1) || 1;
                $(window).scroll(function () {

                    var scrollTop = $(window).scrollTop();
                    var height = $('#image-list').height();
                    var windowHeight = $(window).height();
                    if (scrollTop >= height - windowHeight + 100) {
                        if (!loading) {
                            loading = true;
                            $('.loading-more').css('opacity', 1);
                            pn++;
                            var totalPage = #(paginate.totalPage);
                            if (pn > totalPage) {
                                $('.loading-more').addClass('success');
                                return;
                            }
                            $.ajax({
                                type: "GET",
                                url: "/image/page/" + pn,
                                data: {
                                    pn: pn,
                                    classId: #(paraToInt1)
                                },
                                dataType: 'json',
                                success: function (result) {
                                    var list = result.data.list;
                                    nunjucks.configure('/assets/public/view', {autoescape: true});
                                    var str = nunjucks.render('list.html', {list: list});
                                    //let ad = '<div class="box" style="width:246px;height:400px;"><ins class="adsbygoogle" style="display:inline-block;width:246px;height:400px" data-ad-client="ca-pub-9196458143056886" data-ad-slot="9247751478"></ins></div>'
                                    //str = ad + str;
                                    str = $(str);
                                    $('#image-list').append(str);
                                    $('#image-list').masonry('appended', str, true);
                                    Home.initLazyLoad();
                                    loading = false;
                                    window.location.hash = pn;
                                },
                                error: function (e) {
                                    console.log(e.status);
                                    console.log(e.responseText);
                                }
                            });
                        }
                    }
                });
            }
        };

        Home.init();

    })
</script>


#define header()
#include("/image/header.html")
#end

#define sidebar()
#include("/image/sidebar.html")
#end


#define imageList()
#include("/image/image-list.html")
#end